<template>
  <div class="products-container">
    <h2>商品信息</h2>
    <ul>
      <li v-for="item in productsList" :key="item.id">
        {{ item.name }} -- {{ item.price }}元&nbsp;&nbsp;剩余{{
          item.inventory
        }}个
        <br />
        <!-- 这个商品如果没有库存,那么按钮就应该禁用掉 -->
        <button
          class="add"
          @click="addCart(item)"
          :disabled="item.inventory === 0"
        >
          {{ item.inventory === 0 ? '没有库存了' : '添加购物车' }}
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Products',
  data () {
    return {}
  },
  props: {},
  components: {},
  computed: {
    ...mapState('product', ['productsList'])
  },
  watch: {},
  created () {
    this.getProductsList()
  },
  mounted () {},
  methods: {
    ...mapActions('product', ['getProductsList']),
    ...mapActions('cart', ['addCart'])
  }
}
</script>

<style scoped lang="less">
.add {
  cursor: pointer;
}
</style>
